<template>
<!-- template是写结构的地方，布置浏览器初始的界面-->
<!---->
<div>
  <div>
    <!-- click 跳转  传出跳转的id-->
    <nuxt-link :to="`/post/detail?id=${data.id}`"> 
      <div class="post-title">
         {{ data.title}}
      </div>
      <el-row type="flex" justify="space-between">
        <div class="post-cover" v-if="data.images">
         <img :src="data.images">
        </div>

        <div>

        </div>
      </el-row>
    </nuxt-link> 

    <!-- 头像，用户，细节 -->
    <el-row type="flex" justify="space-between" class="post-info">
     <el-row type="flex" align="middle" class="post-info-left">
        <span>
        <i class="el-icon-location-outline"></i> 
        {{data.city.name}}
      </span>
        <el-row type="flex" align="middle" class="post-user">
                        by 
        <nuxt-link to="/user/personal">
            <img :src="$axios.defaults.baseURL +data.account.defaultAvatar">
            </nuxt-link>
            <nuxt-link to="/user/personal">
            {{data.account.nickname}} 
        </nuxt-link>
      </el-row>
         <span>
          <i class="el-icon-view"></i> {{data.watch || 0}}
        </span>
      </el-row>
       <span class="post-info-right" @click="addlike">
        {{data.like || 0}} 赞
       </span>
      </el-row>
  </div>
</div>
</template>

<script>
//script 是写js的地方，实现操作功能的逻辑代码区
export default {
  props:{
    data:{
      type: Array,
      default:() => ({})
    }
  },
    data(){
      return{
      }
    },
    methods:{

    },
    mounted(){
      console.log(888,this.data)
    },
    methods:{
      addlike(){
        this.data.like=this.data.like+1
      }
    }
}

</script>
<style scoped lang="less">
.post-item{
    width:100%;
    padding:20px 0;
    border-bottom:1px #eee solid;
}

.image-text{
    .post-content{
        flex: 1;
    }
    .post-desc{
    }
}


.post-cover{
    width:220px;
    height:150px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right:10px;

    img{
        display:block;
        width:100%;
        height: 100%;
        object-fit: cover;
    }
}

.post-title{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin-bottom:15px;
    font-weight: normal;
    font-size:18px;

    a:hover{
        color:orange;
    }
}

.post-desc{    
    margin-bottom: 15px;
    line-height: 1.5;
    font-size:14px;
    height: 1.5 *14px * 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient:vertical;

    a{
        color:#666;
    }
}




.post-user{
     img{
         display:block;
         width:16px;
         height:16px;
         border-radius: 100px;
         margin: 5px;
     }

     a{
         color:orange;
     }
}

.post-info-left{
     font-size: 12px;
     color:#999;

     > *{
         margin-right:10px;
     }
 }

 .post-info-right{
     color:orange;
 }

 .card-images{
     margin:15px 0;
     img{
        width:220px;
        height:150px;
        display: block;
        object-fit: cover;
     }
 }
</style>